<template>
  <div id="brand">
    <main>
      <ul class="ulbrand">
        <li>
          <a @click="gotoList">
            <img src="http://www.mybanana.com.cn/images/img_14919055851687.jpg" alt />
            <h2>西班牙ADRIEN LASTIC</h2>
          </a>
        </li>
        <li>
          <a @click="gotoList">
            <img src="http://www.mybanana.com.cn/images/img_15399372259623.jpg" alt />
            <h2>美国房趣ROOMFUN</h2>
          </a>
        </li>
        <li>
          <a>
            <img src="http://www.mybanana.com.cn/images/img_14900032459215.jpg" alt />
            <h2>美国MOVO</h2>
          </a>
        </li>
        <li>
          <a @click="gotoList">
            <img src="http://www.mybanana.com.cn/images/img_14575050799401.jpg" alt />
            <h2>香港诺兰</h2>
          </a>
        </li>
        <li>
          <a @click="gotoList">
            <img src="http://www.mybanana.com.cn/images/img_14709644858640.jpg" alt />
            <h2>日本RendS</h2>
          </a>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
export default {
  methods: {
    gotoList() {
      this.$router.push({ name: "list" });
    }
  }
};
</script>

<style>
html,
body {
  height: 100%;
  width: 100%;
}

#brand {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#brand a {
  text-decoration: none;
}

#brand main {
  flex: 1;
  overflow-y: scroll;
}

#brand main .ulbrand li {
  height: 5.306667rem;
  position: relative;
}

#brand main .ulbrand li a {
  display: block;
}

#brand main .ulbrand li img {
  width: 100%;
}

#brand main .ulbrand li h2 {
  width: 100%;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  height: 0.933333rem;
  line-height: 0.933333rem;
  font-size: 0.373333rem;
}
</style>